<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="device=device-width">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 500px;
            margin: 50px auto;
        }
        .box2{
            width: 400px;
            height: 450px;
            border: 3px solid black;
            padding: 5px;
        }
        .box2 div{
            width: 50px;
            border: 1px solid rgb(154,26,27);
            border-right: none;
            border-bottom: none;
            height: 50px;
            box-sizing: border-box;
        }
        .fx:after{
            clear: both;
            display: table;
            content: "";
        }
        .fl{
            float: left;
        }
        .box2 div:nth-of-type(8n){
            border-right: 1px solid rgb(154,26,27);
            box-sizing: border-box;
        }
        .box2 div:nth-of-type(57){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(58){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(59){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(60){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(61){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(62){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(57){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(63){
            border-bottom: 1px solid rgb(154,26,27);
        }
        .box2 div:nth-of-type(64){
            border-bottom: 1px solid rgb(154,26,27);
        }
        p{
            width: 398px;
            height: 50px;
            margin: 0px;
            border: 1px solid rgb(154,26,27);
            border-bottom: none;
        }
        span{
            display: inline-block;
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 30px;
            font-family: 隶书;
            color: rgb(154,26,27);

        }
        .x1{
            width: 1px;
            height: 142px;
            background:rgb(154,26,27);
            position: absolute;
            left: 208px;
            top: -12px;
            transform: rotate(45deg);
        }
        .x2{
            width: 1px;
            height: 142px;
            background: rgb(154,26,27);
            position: absolute;
            left: 208px;
            top: -12px;
            transform: rotate(135deg);
        }
        .x3{
            width: 1px;
            height: 142px;
            background:rgb(154,26,27);
            position: absolute;
            left: 208px;
            top: 338px;
            transform: rotate(45deg);
        }
        .x4{
            width: 1px;
            height: 142px;
            background: rgb(154,26,27);
            position: absolute;
            left: 208px;
            top: 338px;
            transform: rotate(135deg);
        }
        .a1{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 13px;
        }
        .a2{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 13px;
        }
        .a3{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 13px;
        }
        .a4{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 13px;

        }
        .a5{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:92px;
            left: 43px;
        }
        .a6{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:112px;
            left: 43px;
        }
        .a7{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:92px;
            left: 63px;
        }
        .a8{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:112px;
            left: 63px;
        }
        .a9{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:342px;
            left: 43px;
        }
        .a10{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:362px;
            left: 43px;
        }
        .a11{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:342px;
            left: 63px;
        }
        .a12{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:362px;
            left: 63px;
        }
        .a13{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 93px;
        }
        .a14{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 93px;
        }
        .a15{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 93px;
        }
        .a16{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 93px;
        }
        .a17{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 113px;
        }
        .a18{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 113px;
        }
        .a19{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 113px;
        }
        .a20{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 113px;
        }
        .a21{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 213px;
        }
        .a22{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 213px;
        }
        .a23{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 213px;
        }
        .a24{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 213px;
        }
        .a25{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 193px;
        }
        .a26{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 193px;
        }
        .a27{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 193px;
        }
        .a28{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 193px;
        }
        .a29{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 313px;
        }
        .a30{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 313px;
        }
        .a31{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 313px;
        }
        .a32{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 313px;
        }
        .a33{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 293px;
        }
        .a34{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 293px;
        }
        .a35{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 293px;
        }
        .a36{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 293px;
        }
        .a37{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:142px;
            left: 393px;
        }
        .a38{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:162px;
            left: 393px;
        }
        .a39{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:292px;
            left: 393px;
        }
        .a40{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:312px;
            left: 393px;
        }
        .a41{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:92px;
            left: 343px;
        }
        .a42{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:112px;
            left: 343px;
        }
        .a43{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:92px;
            left: 363px;
        }
        .a44{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:112px;
            left: 363px;
        }
        .a45{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:342px;
            left: 343px;
        }
        .a46{
            position: absolute;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:362px;
            left: 343px;
        }
        .a47{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-bottom: 1px solid rgb(154,26,27);
            top:342px;
            left: 363px;
        }
        .a48{
            position: absolute;
            width: 10px;
            height: 10px;
            border-left: 1px solid rgb(154,26,27);
            border-top: 1px solid rgb(154,26,27);
            top:362px;
            left: 363px;
        }
        .q{
            height: 40px;
            width: 40px;
            font-weight: bold;
            font-family: 隶书;
            font-size: 30px;
            box-shadow: 2px 2px 5px #cccccc;
            line-height: 40px;
            text-align: center;
            border-radius: 50px;
            color: cornsilk;
            background-color: brown;
            position: absolute;
            left: 187px;
            top: -10px;
        }
        .q1{
            height: 40px;
            width: 40px;
            font-weight: bold;
            font-family: 隶书;
            font-size: 30px;
            box-shadow: 2px 2px 5px #cccccc;
            line-height: 40px;
            text-align: center;
            border-radius: 50px;
            color: cornsilk;
            background-color: brown;
            position: absolute;
            left: 187px;
            top:calc(-10px + 450px) ;
        }
    </style>
</head>
<body>
    <a href="xq.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="index.html">作业三</a>
    <a href="string.html">作业四</a>
    <a href="temp.html">作业五</a>
    <div class="box">
        <div class="x1"></div>
        <div class="x2"></div>
        <div class="x3"></div>
        <div class="x4"></div>
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
        <div class="a5"></div>
        <div class="a6"></div>
        <div class="a7"></div>
        <div class="a8"></div>
        <div class="a9"></div>
        <div class="a10"></div>
        <div class="a11"></div>
        <div class="a12"></div>
        <div class="a13"></div>
        <div class="a14"></div>
        <div class="a15"></div>
        <div class="a16"></div>
        <div class="a17"></div>
        <div class="a18"></div>
        <div class="a19"></div>
        <div class="a20"></div>
        <div class="a21"></div>
        <div class="a22"></div>
        <div class="a23"></div>
        <div class="a24"></div>
        <div class="a25"></div>
        <div class="a26"></div>
        <div class="a27"></div>
        <div class="a28"></div>
        <div class="a29"></div>
        <div class="a30"></div>
        <div class="a31"></div>
        <div class="a32"></div>
        <div class="a33"></div>
        <div class="a34"></div>
        <div class="a35"></div>
        <div class="a36"></div>
        <div class="a37"></div>
        <div class="a38"></div>
        <div class="a39"></div>
        <div class="a40"></div>
        <div class="a41"></div>
        <div class="a42"></div>
        <div class="a43"></div>
        <div class="a44"></div>
        <div class="a45"></div>
        <div class="a46"></div>
        <div class="a47"></div>
        <div class="a48"></div>
        <div class="q">将</div>
        <div class="q1">帅</div>
    <div class="box2 fx">
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <p class="fl"><span>楚河</span><span>汉界</span></p>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
        <div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div><div class="fl"></div>
    </div>
    </div>
   

    
</body>
</html>